<template>
    <h1>个人信息</h1>
    <h2 v-show="person.name">姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
    <h2>职业：{{ person.job.type }}</h2>
    <h2>薪水：{{ person.job.salary }}</h2>
    <h2>爱好：{{ person.hobby }}</h2>
    <button @click="changeInfo">修改</button>
    <button @click="addSex">添加一个 sex 属性</button>
    <button @click="deleteName">删除Name属性</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        vue3 中新特性，修改属性后直接刷新页面，无需手动调用函数更新

    </p>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
    name: 'ref',
    setup() {
        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                type: '前端',
                salary: '30k'

            },
            hobby:['打游戏','打游戏','打游戏']

        })

        // 方法
        function changeInfo() {
            person.name = '李四'
            person.age = 90
            person.job.type = 'UI设计'
            person.job.salary = '20k'
            person.hobby[0] = '学习'
        }
        function addSex(){
            person.sex = '男'
        }
        function deleteName(){
            delete person.name

        }

        return {
            person,
            changeInfo,
            addSex,
            deleteName,
        }
    }
} 
</script>
<style></style>